<template>
	<view class="content">
		<!-- 头部 -->
		<view class="head">
			<text>财富</text>
			<image src="../../static/index/hs.png" mode="" class="po-img"></image>
			<input type="text" value="" class="ipt" placeholder="搜索相关信息" placeholder-style=" color: grey" />
			<image src="../../static/wealth/xx.png" mode=""></image>
			<image src="../../static/wealth/qb.png" mode=""></image>
		</view>
		<view class="hd-blue"></view>
		<view class="hd-yellow">
			<view class="hd-yellow-t">
				<text>总资产</text>
				<text class="hd-yellow-ts">0.00</text>
			</view>
			<view class="hd-yellow-t">
				<text>最新收益</text>
				<text class="hd-yellow-ts">0.00</text>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="main">
			
			<view class="main-img-text" @tap="runFinancial">
				<image src="../../static/wealth/hq.png" mode=""></image>
				<text>活期</text>
			</view>
			<view class="main-img-text" @tap="dingqi">
				<image src="../../static/wealth/dq.png" mode=""></image>
				<text>定期</text>
			</view>
			<view class="main-img-text" @tap="jiJin">
				<image src="../../static/wealth/jj.png" mode=""></image>
				<text>基金</text>
			</view>
			<view class="main-img-text" @tap="goGold">
				<image src="../../static/wealth/hj.png" mode=""></image>
				<text>黄金</text>
			</view>
			<view class="main-img-text">
				<image src="../../static/wealth/gp.png" mode=""></image>
				<text>股票</text>
			</view>
			<view class="main-img-text">
				<image src="../../static/wealth/wj.png" mode=""></image>
				<text>稳健精选</text>
			</view>
			<view class="main-img-text">
				<image src="../../static/wealth/tt.png" mode=""></image>
				<text>天天财富</text>
			</view>
			<view class="main-img-text">
				<image src="../../static/wealth/jjtg.png" mode=""></image>
				<text>基金投顾</text>
			</view>
			<view class="main-img-text">
				<image src="../../static/wealth/wdlc.png" mode=""></image>
				<text>我的理财</text>
			</view>
			<view class="main-img-text">
				<image src="../../static/wealth/gdlc.png" mode=""></image>
				<text>高端理财</text>
			</view>
		</view>
		<view class="shi-main"></view>
		<!-- 行情 -->
		<view class="hangqing">
			<text class="hangqing-title">行情</text>
			<view class="hangqing-mains">
				<view class="hangqing-main">
					<text class="hangqing-main-black">深圳成指</text>
					<text class="hangqing-main-red1">14828.80</text>
					<view class="hangqing-main-t">
						<text class="hangqing-main-red2">-41.86</text>
						<text class="hangqing-main-red3">-0.28%</text>
					</view>
				</view>
				<view class="hangqing-main">
					<text class="hangqing-main-black">上证指数</text>
					<text class="hangqing-main-red1">14828.80</text>
					<view class="hangqing-main-t">
						<text class="hangqing-main-red2">-41.86</text>
						<text class="hangqing-main-red3">-0.28%</text>
					</view>
				</view>
				<view class="hangqing-main">
					<text class="hangqing-main-black">创业板指</text>
					<text class="hangqing-main-red1">14828.80</text>
					<view class="hangqing-main-t">
						<text class="hangqing-main-red2">-41.86</text>
						<text class="hangqing-main-red3">-0.28%</text>
					</view>
				</view>
				<view class="hangqing-mains-blue">
					<image src="../../static/wealth/lb.png" mode=""></image>
					<text>新春福利 速领50元红包</text>
					<text class="hangqing-mains-blue-t1">|</text>
					<image src="../../static/wealth/fl.png" mode=""></image>
					<text>福利:领1288元红包</text>
				</view>
			</view>
		</view>
		<!-- 黄图 easy-->
		<view class="easymain">
			<image src="../../static/wealth/easy.png" mode="" class="easy"></image>
		</view>
		<!-- 基金投顾 -->
		<view class="jijintougu">
			<text class="jijintougu-title">基金投顾</text>
			<view class="jijintougu-main">
				<view class="jijintougu-main-t">
					<text class="jijintougu-main-t-block">智能投顾</text>
					<text class="jijintougu-main-t-black">测一测适合哪种组合</text>
					<text class="jijintougu-main-t-grey">精心打造 专属方案</text>
					<text class="jijintougu-main-t-end">去测评</text>
				</view>
				<view class="jijintougu-main-t">
					<text class="jijintougu-main-t-block">追求高收益</text>
					<text class="jijintougu-main-t-black">南方股债轮动进取组合</text>
					<text class="jijintougu-main-t-grey">近1年收益59.15%</text>
					<text class="jijintougu-main-t-end">查看详情</text>
				</view>
			</view>
		</view>
		<!-- 热门基金 -->
		<view class="TrumpCard-list">
			<text class="TrumpCard-list-title">
				热门基金
			</text>
			<view class="TrumpCard-list-four-texts">
				<text class="TrumpCard-list-four-text-active">推荐</text>
				<text class="TrumpCard-list-four-text">稳健之选</text>
				<text class="TrumpCard-list-four-text">长跑之选</text>
				<text class="TrumpCard-list-four-text">港股精选</text>
			</view>
			<view class="TrumpCard-list-louceng">

				<view class="TrumpCard-list-louceng-one one-top">
					<view class="TrumpCard-list-louceng-one-top ">
						<text class="TrumpCard-list-louceng-one1 ">广发资源优选A股</text>
						<text class="TrumpCard-list-louceng-one3">政策利好</text>
					</view>
					<view class="TrumpCard-list-louceng-one-mids">
						<view class="TrumpCard-list-louceng-one-mid">
							<text class="TrumpCard-list-louceng-one-red">88.23</text>
							<text class="TrumpCard-list-louceng-one-xred">%</text>
						</view>
						<view class="TrumpCard-list-louceng-one-mid">
							<text class="TrumpCard-list-louceng-one-black">前5</text>
							<text class="TrumpCard-list-louceng-one-xblack">%</text>
						</view>
						<text class="TrumpCard-list-louceng-one-black">周期行业</text>
					</view>
					<view class="wid100">
						<text class="TrumpCard-list-louceng-one-normal TrumpCard-list-louceng-one-normal1">近一年收益率</text>
						<text class="TrumpCard-list-louceng-one-normal ">同类排名</text>
						<text class="TrumpCard-list-louceng-one-normal">大宗商品 库存低位</text>
					</view>
				</view>

				<view class="TrumpCard-list-louceng-one">
					<view class="TrumpCard-list-louceng-one-top">
						<text class="TrumpCard-list-louceng-one1 ">南方新优享混合</text>
					</view>
					<view class="TrumpCard-list-louceng-one-mids">
						<view class="TrumpCard-list-louceng-one-mid">
							<text class="TrumpCard-list-louceng-one-red">55.30</text>
							<text class="TrumpCard-list-louceng-one-xred">%</text>
						</view>
						<view class="TrumpCard-list-louceng-one-mid">
							<text class="TrumpCard-list-louceng-one-black">前10</text>
							<text class="TrumpCard-list-louceng-one-xblack">%</text>
						</view>
						<text class="TrumpCard-list-louceng-one-black">大国制造</text>
					</view>
					<view class="wid100">
						<text class="TrumpCard-list-louceng-one-normal TrumpCard-list-louceng-one-normal1">近一年收益率</text>
						<text class="TrumpCard-list-louceng-one-normal ">同类排名</text>
						<text class="TrumpCard-list-louceng-one-normal">基建制造 转型升级</text>
					</view>
				</view>

				<view class="TrumpCard-list-louceng-one">
					<view class="TrumpCard-list-louceng-one-top">
						<text class="TrumpCard-list-louceng-one1 ">汇添富双利债券A</text>
						<text class="TrumpCard-list-louceng-one3">政策利好</text>
					</view>
					<view class="TrumpCard-list-louceng-one-mids">
						<view class="TrumpCard-list-louceng-one-mid">
							<text class="TrumpCard-list-louceng-one-red">79.36</text>
							<text class="TrumpCard-list-louceng-one-xred">%</text>
						</view>
						<view class="TrumpCard-list-louceng-one-mid">
							<text class="TrumpCard-list-louceng-one-black">前10</text>
							<text class="TrumpCard-list-louceng-one-xblack">%</text>
						</view>
						<text class="TrumpCard-list-louceng-one-black">长青板块</text>
					</view>
					<view class="wid100">
						<text class="TrumpCard-list-louceng-one-normal TrumpCard-list-louceng-one-normal1">近一年收益率</text>
						<text class="TrumpCard-list-louceng-one-normal ">同类排名</text>
						<text class="TrumpCard-list-louceng-one-normal">白酒+消费内循环</text>
					</view>
				</view>

			</view>


		</view>
		<!-- 触底 -->
		<view class="chudi">
			<text>加载更多...</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			dingqi() {
				uni.navigateTo({
					url: '../periodically/periodically',
					success: res => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				})
			},
			runFinancial() {
				uni.navigateTo({
					url: '../currentFinancial/currentFinancial',
					success: res => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {}
				})
			},
			jiJin() {
				uni.navigateTo({
					url: '../wealth/funds/funds',
				})
			},
			goGold() {
				uni.navigateTo({
					url: "./gold/gold",
				})
			},
			//获取菜单
			async caidan(){
				const res= await this.$request({
					url: '/sys/navigation/info', //仅为示例，并非真实接口地址。
					method:"GET",
				})
				if(res.code==200){
					this.menuArr=res.data;
				}
				console.log(this.menuArr,"菜单");
			},
			//热门
			huoDoor(){
				
			}
		},
		onLoad(){
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		overflow: hidden;

		//  头部
		.head {
			width: 100%;
			height: 60rpx;
			background-color: #3476f1;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			color: #FFFFFF;
			font-weight: 600;
			font-size: 35rpx;

			.ipt {
				color: #000;
				font-weight: 400;
				box-sizing: border-box;
				padding-left: 80rpx;
				width: 446rpx;
				height: 60rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				background-color: #fff;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.po-img {
				position: absolute;
				left: 150rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}

		.hd-blue {
			position: absolute;
			top: 90rpx;
			z-index: -1;
			width: 100%;
			height: 100rpx;
			background-color: #3476f1;
		}

		.hd-yellow {
			height: 200rpx;
			width: 750rpx;
			background-color: #ffe3c0;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			display: flex;

			.hd-yellow-t {
				width: 50%;
				height: 200rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: space-around;
				justify-content: center;
				box-sizing: border-box;
				padding-bottom: 50rpx;

				text {
					text-align: center;
					width: 100%;
					display: block;
					font-size: 24rpx;
				}

				.hd-yellow-ts {
					font-size: 36rpx;
					color: #333;
					font-weight: 800;
				}
			}
		}

		//菜单
		.main {
			position: absolute;
			top: 260rpx;
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			padding: 40rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			justify-content: space-between;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;

			.main-img-text {
				width: 88rpx;
				height: 140rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: space-around;
				margin: 0 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
				}

				text {
					font-size: 22rpx;
					color: #666;
				}
			}
		}

		.shi-main {
			width: 100%;
			height: 350rpx;
		}

		//行情
		.hangqing {
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin: 0 auto;
			width: 100%;

			.hangqing-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.hangqing-mains {
				width: 100%;
				height: 270rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 30rpx 24rpx;
				border: 3rpx solid #eaeaea;
				border-radius: 15rpx;

				.hangqing-main {
					height: 156rpx;
					width: 156rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.hangqing-main-black {
						font-size: 28rpx;
						color: #333;
					}

					.hangqing-main-red1 {
						display: block;
						margin: 20rpx 0 10rpx 0;
						font-size: 36rpx;
						color: #f85656;
						font-weight: bold;
					}
					.hangqing-main-t{
						width: 100%;
						.hangqing-main-red2,
						.hangqing-main-red3 {
							color: #f85656;
							font-size: 24rpx;
						}
					}
					
				}

				.hangqing-mains-blue {
					margin-top: 10rpx;
					background-color: #eaf1fe;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 24rpx;
					color: #333;
					box-sizing: border-box;
					height: 48rpx;
					padding-left: 20rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}

					.hangqing-mains-blue-t1 {
						display: inline-block;
						margin: 32rpx;
						color: #999;
					}
				}
			}
		}

		//黄图easy
		.easymain {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			justify-content: center;

			.easy {
				width: 702rpx;
				height: 180rpx;
			}
		}

		//基金投顾
		.jijintougu {
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin: 0 auto;
			width: 100%;
			margin-top: 30rpx;

			.jijintougu-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.jijintougu-main {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.jijintougu-main-t {
					width: 342rpx;
					border: 4rpx solid #fafafa;
					box-sizing: border-box;
					border-radius: 20rpx;
					padding: 20rpx;

					.jijintougu-main-t-block {
						font-size: 24rpx;
						width: 100%;
						background-color: #eaf1fe;
						padding: 5rpx 10rpx;
						line-height: 36rpx;
						border-radius: 4rpx;
						color: #3476f1;
						opacity: 0.9;
					}

					.jijintougu-main-t-black {
						font-weight: 600;
						display: block;
						font-size: 30rpx;
						margin-bottom: 10rpx;
						margin-top: 22rpx;
					}

					.jijintougu-main-t-grey {
						display: block;
						font-size: 24rpx;
						color: #999;
						margin-bottom: 36rpx;
					}

					.jijintougu-main-t-end {
						font-size: 28rpx;
						color: #333;
						position: relative;
					}

					.jijintougu-main-t-end::after {
						content: '';
						position: absolute;
						background-image: url(../../static/index/right.png);
						width: 15rpx;
						height: 26rpx;
						background-repeat: no-repeat;
						background-size: cover;
						top: 8rpx;
						right: -30rpx;
					}
				}
			}
		}

		//热门基金
		.TrumpCard-list {
			box-sizing: border-box;
			width: 700rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 20rpx;

			.TrumpCard-list-title {
				font-size: 32rpx;
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				color: #000;
				border-left: 8rpx solid #3476f1;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				font-weight: 600;
				position: relative;
				display: block;
			}

			.TrumpCard-list-title::after {
				content: '';
				background-image: url(../../static/index/right.png);
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				width: 15rpx;
				height: 26rpx;
				top: 10rpx;
				right: 0rpx;
			}

			.TrumpCard-list-four-texts {
				margin-top: 20rpx;
				height: 48rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.TrumpCard-list-four-text-active {
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 600;
					display: inline-block;
					background-color: #4590ef;
					width: 144rpx;
					height: 48rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 48rpx;
				}
			}

			.TrumpCard-list-louceng {
				width: 704rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;
				display: flex;
				flex-wrap: wrap;
				border: 4rpx solid #fafafa;

				.TrumpCard-list-louceng-one {
					height: 208rpx;
					width: 100%;
					position: relative;
					border-top: 4rpx solid #fafafa;
					display: flex;
					flex-wrap: wrap;
					align-content: space-around;
					padding: 0 20rpx;

					.TrumpCard-list-louceng-one-top {
						display: flex;
						align-items: center;
						// margin-bottom: 30rpx;

						.TrumpCard-list-louceng-one1 {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: #333333;
							display: inline-block;
							padding-right: 10rpx;
						}

						.TrumpCard-list-louceng-one2 {
							font-size: 28rpx;
							color: #333333;
							display: inline-block;
							padding-right: 20rpx;
						}

						.TrumpCard-list-louceng-one3 {
							font-size: 20rpx;
							color: #cd9b53;
							display: inline-block;
							height: 36rpx;
							line-height: 36rpx;
							width: 104rpx;
							background-color: #f5ecde;
							text-align: center;
							border-radius: 5rpx;
							margin-right: 10rpx;
							margin-top: 10rpx;
						}
					}


					.TrumpCard-list-louceng-one-mids {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.TrumpCard-list-louceng-one-mid {

							.TrumpCard-list-louceng-one-red {
								font-size: 33rpx;
								color: #f85656;
								font-weight: 800;
							}

							.TrumpCard-list-louceng-one-xred {
								font-size: 26rpx;
								color: #f85656;
								font-weight: 800;
								display: inline-block;
								// margin-bottom: 20rpx;
							}

							.TrumpCard-list-louceng-one-xblack {
								font-size: 26rpx;
								display: inline-block;
								font-weight: 800;
							}

						}

						.TrumpCard-list-louceng-one-black {
							font-size: 30rpx;
							font-weight: 800;
						}
					}

					.wid100 {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.TrumpCard-list-louceng-one-normal {
							// margin-top: 10rpx;
							font-size: 20rpx;
							color: #868686;
							display: inline-block;
							// padding-right: 10rpx;
						}

						.TrumpCard-list-louceng-one-normal1 {
							padding-right: 40rpx;
						}
					}
				}

				.one-top {
					border-top: 4rpx solid #FFFFFF;

				}
			}
		}

		//触底
		.chudi {
			height: 60rpx;
			width: 100%;
			text-align: center;

			text {
				color: #999;
				font-size: 24rpx;
			}
		}

	}
</style>
